<template>
  <div style="width: 100%; overflow: auto">
    <div>
      <nav1></nav1>
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(l, i) in banner" :key="i">
            <img
              @click="gotodetail(i, l.id, l.product_id)"
              :src="l.img"
              alt=""
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="middle">
        <li v-for="(l, i) in middle1" :key="i">
          <img @click="middleGoto(i)" :src="l.scene_img" alt="" />
        </li>
      </div>
      <div class="title">
        <h4>活动专区</h4>
        <div style="display: flex; width: 100%; justify-content: space-between">
          <li style="width: 34%" v-for="(l, i) in activity" :key="i">
            <img :src="l.scene_img" alt="" />
          </li>
        </div>
      </div>
    </div>
    <div class="title2">
      <img
        src="https://oss.flowerplus.cn/homepage/16159505721467.jpg!60"
        @click.stop="$router.push({ name: 'banner', query: { num: 1 } })"
        alt=""
      />
    </div>
    <div class="title3">
      <h4>山东大芍药新品发布</h4>
      <ul>
        <span>低至6.9元起</span
        ><span style="color: 'red'">了解更多</span>
      </ul>
      <div class="shaoyao">
        <ul>
          <li
            v-for="(l, i) in shaoyao"
            :key="i"
            @click="
              $router.push({ name: 'detail', query: { id: l.product_id } })
            "
          >
            <img :src="l.img" alt="" />
            <p class="van-ellipsis">{{ l.title }}</p>
            <p>￥{{ l.price }}起</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="title4">
      <h4>限时团购</h4>
      <ul>
        <span>FLASH SALE</span
        ><span style="color: 'red'">{{ a }}/{{ groupBuy.length }}</span>
      </ul>
      <div class="content">
        <van-swipe
          class="my-swipe"
          :show-indicators="false"
          @change="swipeChange"
        >
          <van-swipe-item v-for="(l, i) in groupBuy" :key="i">
            <li @click="$router.push({ name: 'detail', query: { id: l.id } })">
              <div class="imgbox">
                <img :src="l.img" alt="" />
              </div>
              <div class="right">
                <div class="top">
                  <div style="margin-left: 15px">
                    <van-icon name="clock-o" style="display: inline" />
                    <van-count-down
                      style="display: inline; color: #353331"
                      ref="countDown"
                      millisecond
                      :time="l.left_time * 1000"
                      :auto-start="true"
                      format="DD天HH时mm分ss秒"
                    />
                  </div>
                </div>
                <p class="middle van-ellipsis">{{ l.title }}</p>
                <div class="buttom">
                  <div>
                    <span>原价{{ l.original_price }}</span
                    ><span>￥{{ l.price }}</span>
                  </div>
                </div>
              </div>
            </li>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="title5"></div>
    </div>
    <div class="title5">
      <h4>发现好物</h4>
      <ul>
        <span>GOOD THINGS</span
        ><span></span>
      </ul>
      <div class="main">
        <li v-for="(l, i) in find" :key="i">
          <img :src="l.img" alt="" />
          <p>{{ l.title }}</p>
          <p>￥{{ l.price }}</p>
        </li>
      </div>
    </div>

    <div class="company_info">
      <a href="/index/company_info">©2013-2021 上海分尚网络科技有限公司</a
      ><br />
      <a href="https://beian.miit.gov.cn/">沪ICP备13016979</a>
      <a
        target="_blank"
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011402005615"
        style="display: inline-block; margin-left: 5px"
        ><img
          src="https://oss.flowerplus.cn/oss_png/2019-01-16/15476212828972.png"
          style="width: 12px; margin-bottom: 3px; margin-right: 2px"
        />
        <span>沪公网安备 31011402005615号</span></a
      >
    </div>
    <foot></foot>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      active: "",
      banner: "",
      middle1: "",
      activity: "",
      shaoyao: "",
      groupBuy: "",
      a: 1,
      find: "",
    };
  },
  methods: {
    swipeChange(index) {
      this.a = index + 1;
    },

    gotodetail(i, id, newid) {
      if (i == 0 || i == 2 || i == 4 || i == 5 || i == 6) {
        this.$router.push({ name: "banner", query: { num: i + 1 } });
      } else {
        if (id == 0) {
          id = newid;
        }
        this.$router.push({ name: "detail", query: { id } });
      }
    },

    middleGoto(i) {
      if (i == 0) {
        this.$router.push({ name: "allmonth" });
      }
    },
  },
  mounted() {

    console.log(this.$store.state.appphone);
    axios({
      method: "get",
      url: "http://localhost:3200/data",
    }).then((data) => {
      this.banner = data.data.index.BANNER;
      this.shaoyao = data.data.index.ACTIVITY;
      this.middle1 = data.data.MIDDLE_CATEGORY;
      this.activity = data.data.ACTIVITY_CATEGORY;
      this.groupBuy = data.data.index.GROUP_BUY;
      this.find = data.data.index.GOODS_THINGS;
      console.log(this.shaoyao);
    });
  },
};
</script>
<style scoped lang="scss">
li {
  list-style: none;
}
.banner {
  margin-bottom: 20px;
  img {
    border: 0;
    width: 100%;
    vertical-align: middle;
  }
}
.middle {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  li {
    width: 25%;
    height: 2rem;
    &:nth-child(1) {
      width: 50%;
      height: 2.3rem;
    }
    &:nth-child(2) {
      height: 2.3rem;
    }
    &:nth-child(3) {
      height: 2.3rem;
    }
    img {
      width: 100%;
      height: 100%;
    }
    flex-shrink: 0;
    overflow: hidden;
  }
}
.title {
  padding: 0 0.4rem;
  margin-bottom: 0.4rem;
  h4 {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    margin-left: 13px;
    height: 0.5rem;
    font-size: 0.5rem;
    font-weight: 700;
    color: #312f2e;
    line-height: 0.48rem;
    letter-spacing: 1px;
  }
  li {
    margin-left: 10px;
    img {
      width: 100%;
      height: 63px;
    }
  }
}
.title2 {
  width: 100%;
  height: 83px;
  img {
    width: 100%;
    height: 100%;
  }
}
.title3 {
  margin-bottom: 0.4rem;
  margin-top: 52px;

  padding: 0 0.4rem;
  box-sizing: border-box;
  h4 {
    width: 100%;
    height: 0.48rem;
    font-size: 0.42rem;
    font-weight: 800;
    color: #312f2e;
    line-height: 0.48rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  ul {
    span {
      &:nth-child(2) {
        color: rgba(255, 98, 105, 1);
      }
      &:nth-child(1) {
        color: #888584;
      }
    }
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .shaoyao {
    width: 100%;
    ul {
      margin-left: -10px;
      display: flex;
      width: 100%;
      margin-top: 10px;
      overflow: auto;
      li {
        width: 152px;
        margin-right: 15px;
        p {
          width: 152px;
          font-size: 14px;
          margin: 8px 0;
        }
      }
    }
    img {
      border: 0;

      background: #efedec;
      border-radius: 0.06rem;
      overflow: hidden;
      width: 152px;
      height: 203px;
      vertical-align: middle;
    }
  }
}

.title4 {
  .content {
    width: 100%;
    li {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .right {
        flex: 1;
        width: 100%;
      }
      .middle {
        margin: 0.58rem 0;
        height: 0.4rem;
        font-size: 0.28rem;
        width: 177px;
        display: inline-block;
        margin: 15px 10px;
        // width: 100%;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 0.4rem;
        // text-align: right;
      }
      .buttom {
        // display: inline-block;
        // text-align: right;
        margin: 0 10px;
        // padding-left: 50px;
        // width: 100%;
        & span:nth-child(1) {
          text-decoration: line-through;
        }
        & span:nth-child(2) {
          color: rgba(255, 98, 105, 1);
        }
      }

      .imgbox {
        flex-shrink: 0;
        height: 2.2rem;
        background: #d3d4cb;
        border-radius: 0.06rem;
        overflow: hidden;
        img {
          width: 152px;
          height: 159px;
          position: relative;
          top: -0.5rem;
        }
      }
    }
  }

  margin-bottom: 0.4rem;
  margin-top: 52px;
  padding: 0 0.4rem;
  box-sizing: border-box;
  h4 {
    width: 100%;
    height: 0.48rem;
    font-size: 0.42rem;
    font-weight: 800;
    color: #312f2e;
    line-height: 0.48rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    span {
      &:nth-child(2) {
        color: rgba(255, 98, 105, 1);
      }
      &:nth-child(1) {
        color: #888584;
      }
    }
  }
}

.title5 {
  margin-bottom: 0.4rem;
  margin-top: 52px;

  padding: 0 0.4rem;
  box-sizing: border-box;
  h4 {
    width: 100%;
    height: 0.48rem;
    font-size: 0.42rem;
    font-weight: 800;
    color: #312f2e;
    line-height: 0.48rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    span {
      &:nth-child(2) {
        color: rgba(255, 98, 105, 1);
      }
      &:nth-child(1) {
        color: #888584;
      }
    }
  }
  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
      width: 50%;
      p {
        margin: 8px auto;
      }
      img {
        width: 160px;
        height: 214px;
      }
    }
  }
}
.company_info {
  padding-top: 10px;
  text-align: center;
  font-size: 10px;
  img {
    width: 12px;
    margin-bottom: 3px;
    margin-right: 2px;
    display: block;
  }
  a {
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;

    padding-bottom: 6px;
    color: #999;
  }
}
</style>